/*
    2018/03/06
*/


.page-turning {
    position: relative;
}

.page-turning .page-item {
    width: 50%;
    height: 100%;
    position: absolute;
    background-color: #efefef;
    box-sizing: border-box;
}

.page-turning .to-left-shadow {
    box-shadow: -10px -10px 5px #888888;
}

.page-turning .to-right-shadow {
    box-shadow: 10px 10px 5px #888888;
}

.page-turning .page-item-1 {
    left: 0;
    top: 0;
    z-index: 666;
}

.page-turning .page-item-2 {
    right: 0;
    top: 0;
    z-index: 666;
}

.page-turning .page-item-3 {
    right: 50%;
    top: 0;
    z-index: 999;
    transform-origin: right;
    border-right: 1px solid #dedede;
}

.page-turning .page-item-4 {
    left: 50%;
    top: 0;
    z-index: 999;
    transform-origin: left;
    border-left: 1px solid #dedede;
}

@keyframes to0 {
    from {
        transform: rotateY(90deg);
    }
    to {
        transform: rotateY(0deg);
    }
}

@keyframes to90 {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(90deg);
    }
}

@keyframes to-90 {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(-90deg);
    }
}

@keyframes rightto0 {
    from {
        transform: rotateY(-90deg);
    }
    to {
        transform: rotateY(0deg);
    }
}

.page-turning .right-to-0 {
    animation: rightto0 1s linear;
}

.page-turning .to0 {
    animation: to0 1s linear;
}

.page-turning .to90 {
    animation: to90 1s linear;
}

.page-turning .to-90 {
    animation: to-90 1s linear;
}